<template>
	<view>
		<view style="z-index: -1; position:absolute;background-color: #fdcd1c;
		height: 200rpx;width: 100%;top:0;border-radius:0 0 50% 50%;"></view>
		<view style="margin: 10rpx 20rpx;border-radius: 15rpx;background-color: white; min-height: 300rpx;">
			<view style="border-bottom: #b7b7b7 solid 3rpx; padding: 20rpx 30rpx; color: #9e9e9e; font-size: 33rpx;">{{shopName}}</view>
			
			<view v-for="(item,index) in cartList" :key="index" style="display: flex; padding: 15rpx 10rpx;">
				<image :src="item.image" style="height: 140rpx;width: 140rpx;margin-right: 10rpx;"></image>
				<view>
					<view>{{item.name}}</view>
					<view style="color: #b7b7b7;font-size: 33rpx;">{{item.dishFlavor}}</view>
					<view style="color: #b7b7b7;font-size: 33rpx;">x{{item.number}}</view>
				</view>
				<view style="margin-left: 100rpx;font-size: 41rpx;margin-left: auto;">￥{{item.amount*item.number}} </view>
			</view>
		</view>
		<view @click="modifyRemark()" style="margin: 20rpx 20rpx; border-radius: 20rpx; padding: 15rpx 15rpx;background-color: white;font-size: 33rpx;">
			添加备注
			<uni-icons type="right" size="18" style="float: right;"></uni-icons>
			</view>
		<button @click="orders()" size="default" style="background-color: #fdcd1c; float: right;margin-right: 30rpx;" >提交订单</button>
		<view v-show="remarkModify" class="mask"></view>
			<view v-show="remarkModify" class="popup" 
			style="width: 85%;height: 400rpx;background-color: white;top: 0;left: 0;right: 0;bottom: 20%;margin: auto;border-radius: 20rpx;">
				<view style="margin: 10rpx 20rpx;">
					<uni-easyinput type="textarea" v-model="remark"></uni-easyinput>
				</view>
				
				<view style="display: flex;justify-content: center;">
					<button @click="exitRemark()" style="background-color: #fad104; margin: 20rpx 60rpx; ">关闭</button>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
			baseUrl
		} from '../../config/config'
	export default 
	{
		data() {
			return {
				cartList: [],
				shopId: -1,
				shopName: '',
				remark: '',
				remarkModify: false
			}
		},
		onShow() {
			this.shopId = uni.getStorageSync('shopId')
			this.loadCart()
			this.loadShop()
		},
		methods: {
			loadCart(){
				let token = uni.getStorageSync('token')
				uni.request({
					url: baseUrl + '/cart/list?shopId='+ this.shopId,
					method: 'GET',
					header: {
						'authentication': token,
					},
					success: (res) => {
						if (res.data.code === 0) return;
						this.cartList = res.data.data
						// let count=0
						// let prize=0
						// if(this.cartList!=null){
						// 	for(let i=0;i<this.cartList.length;i++){
						// 		this.dishNumber[this.cartList[i].dishId]=this.cartList[i].number
						// 		count+=this.cartList[i].number
						// 		prize+=this.cartList[i].number*this.cartList[i].amount
						// 	}
						// }
						// this.cartSize=count
						// this.totalPrize=prize
						console.log(this.cartList)
					}
				})
				
			},
			
			loadShop(){
				let token = uni.getStorageSync('token')
				uni.request({
					url: baseUrl + '/shop/detail?shopId=' + this.shopId,
					method: 'GET',
					header: {
						'authentication': token,
					},
					success: (res) => {
						this.shopName=res.data.data.name
					},
					fail: (res) => {
						
					}
				})
			},
			modifyRemark(){
				this.remarkModify=true
			},
			exitRemark(){
				this.remarkModify=false
			},
			orders(){
				let amount=0
				for(let i=0;i<this.cartList.length;i++){
					amount+=this.cartList[i].amount*this.cartList[i].number
				}
				
			}
		}
	}
</script>

<style>
.mask {
  position: fixed;
  /* 使遮罩层铺满整个页面 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  /* 通过z-index属性，使遮罩层在弹出层之下 */
  z-index: 1;
}

/* 弹出层样式 */
.popup {
  position: fixed;
  z-index: 2;
}
</style>
